    <template>
  <div class="housing">
    <!-- 房源管理 -->
    房源管理
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="楼盘销售" name="first">
        <div class="block">
          <section class="container">
            <el-row>
              <el-select v-model="provinceValue" placeholder="请选择" @change="selectProvimce">
                <el-option
                  v-for="(item,index) of provincearr"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
              <el-select v-model="cityValue" placeholder="请选择" @change="selectcity">
                <el-option
                  v-for="(item,index) of cityarr"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
              <el-select placeholder="请选择" v-model="RegionValue" @change="three()">
                <el-option
                  v-for="(item,index) of regionarr"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-row>
          </section>
          <!-- <span class="demonstration">城市选择</span>
          <el-cascader v-model="value" :options="options" @change="handleChange"></el-cascader>-->
          <input type="text" v-model="value" @input="roomsearch(value)" />
          <!-- v-model="search" -->
          <button>搜索</button>
        </div>
        <!-- <div class="search">
       
        </div>-->
        <!-- 新增 -->
        <!-- <el-button type="text" @click="dialogFormVisible = true">新增</el-button> -->
        <p>
          <el-row>
            <!-- 点击显示添加遮罩层 -->
            <el-button type="primary" @click="add()">新增</el-button>
          </el-row>
        </p>
        <!-- <el-table :data="housingList" border style="width: 100%">
          <el-table-column fixed prop="id" label="序号" width="50"></el-table-column>
          <el-table-column prop="name" label="楼盘名称" width="150"></el-table-column>
          <el-table-column prop="area" label="所属区域" width="150"></el-table-column>
          <el-table-column prop="price" label="价格" width="80"></el-table-column>
          <el-table-column prop="time" label="更新时间" width="200"></el-table-column>
          <el-table-column prop="sort" label="排序" width="140"></el-table-column>
          <el-table-column prop="state" label="状态" width="150"></el-table-column>
          <el-table-column fixed="right" label="操作" width="250">
            <template slot-scope="scope">
              <el-button type="text" size="small">户型</el-button>
              <el-button type="text" size="small">相册</el-button>
              <el-button type="text" size="small">动态</el-button>
              <el-button @click="handleClick(scope.row)" type="text" size="small">沙盘</el-button>
              <el-button type="text" size="small">编辑</el-button>
              <el-button type="text" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>-->

        <!-- <td>{{item.state}}</td> -->
        <!-- <div class="tab" stype="overflow:scroll;width:100%">
          <table>
            <thead>
              <tr>
                <th>序号</th>
                <th>楼盘名称</th>
                <th>所需区域</th>
                <th>价格/㎡</th>
                <th>更新时间</th>
                <th>排序</th>
                <th>状态</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item,index) in housingList" :key="index">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.area}}</td>
                <td>{{item.price}}/平方米</td>
                <td>{{item.time}}</td>
                <td>{{item.sort}}</td>
                <td>
                  <a-switch checked-children="开" un-checked-children="关" default-checked />
                  <br />
                </td>
                <td>
                  <span>编辑</span> |
                  <span @click="Del(item.id)">删除</span>
                </td>
              </tr>
            </tbody>
          </table>
        </div>-->

        <!-- 表格 -->
        <a-table
          :columns="columns"
          :data-source="housingList"
          :rowKey="record=>record.id"
          :pagination="{ pageSize: 5 }"
        >
          <a slot="name" slot-scope="text">{{ text }}</a>
          <span slot="customTitle">
            <a-icon type="smile-o" />/平方米
          </span>

          <span slot="tags" slot-scope>
            <a-switch checked-children="开" un-checked-children="关" default-checked />
          </span>

          <!-- <span></span> -->
          <span slot="action" slot-scope="text, record">
            <a @click="update(record)">编辑</a>&ensp;
            <a @click="Del(record.id)">删除</a>&ensp;
          </span>
        </a-table>
      </el-tab-pane>
      <el-tab-pane label="房屋租赁" name="second">
        <!-- 配置管理 -->
        <!-- 点击显示添加遮罩层 -->

        <p>
          <el-row>
            <el-button type="primary" @click="add()">新增</el-button>

            <!-- <button @click="add()">新增</button> -->
            <input
              type="text"
              v-model="value"
              @input="roomsearch(value)"
              style="height: 38px; color: blue;"
            />
            <button style="font-size: 22px; color: blue;">搜索</button>
          </el-row>
        </p>
        <a-table
          :columns="columns"
          :data-source="housingList"
          :rowKey="record=>record.id"
          :pagination="{ pageSize: 5 }"
        >
          <a slot="name" slot-scope="text">{{ text }}</a>
          <span slot="customTitle">
            <a-icon type="smile-o" />/平方米
          </span>
          <span slot="tags" slot-scope>
            <a-switch checked-children="开" un-checked-children="关" default-checked />
          </span>
          <!-- <span></span> -->
          <span slot="action" slot-scope="text, record">
            <a @click="update(record)">编辑</a>&ensp;
            <a @click="Del(record.id)">删除</a>&ensp;
          </span>
        </a-table>
      </el-tab-pane>
    </el-tabs>

    <!-- 遮罩层 -->
    <div class="mask" v-show="flag">
      <!-- 添加数据 -->
      <div class="from" v-show="addFlag">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="楼盘名称" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>
          <el-form-item label="所需区域" prop="area">
            <el-input v-model="ruleForm.area"></el-input>
          </el-form-item>
          <el-form-item label="价格" prop="price">
            <el-input v-model="ruleForm.price"></el-input>
          </el-form-item>
          <div class="block">
            <span class="demonstration">日期</span>
            <el-date-picker
              v-model="ruleForm.time"
              align="right"
              type="date"
              placeholder="选择日期"
              :picker-options="pickerOptions"
            ></el-date-picker>
          </div>
          <el-form-item label="排序" prop="sort">
            <el-input v-model="ruleForm.sort"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="append(ruleForm)">立即添加</el-button>
            <el-button @click="resetForm()">取消</el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 修改数据 -->
      <div class="from" v-show="updateFlag">
        <el-form
          :model="editForm"
          :rules="rules"
          ref="editForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="楼盘名称" prop="name">
            <el-input v-model="editForm.name"></el-input>
          </el-form-item>
          <el-form-item label="所需区域" prop="area">
            <el-input v-model="editForm.area"></el-input>
          </el-form-item>
          <el-form-item label="价格" prop="price">
            <el-input v-model="editForm.price"></el-input>
          </el-form-item>
          <div class="block">
            <span class="demonstration">日期</span>
            <el-date-picker
              v-model="editForm.time"
              align="right"
              type="date"
              placeholder="选择日期"
              :picker-options="pickerOptions"
            ></el-date-picker>
          </div>
          <el-form-item label="排序" prop="sort">
            <el-input v-model="editForm.sort"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="edit(editForm)">修改数据</el-button>
            <el-button @click="resetForm()">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import { housingList } from "../../../api/index";
import { province } from "../../../mock/index";
import axios from "axios";

import { log } from "util";

const columns = [
  {
    title: "序号",
    key: "id",
    dataIndex: "id",
    scopedSlots: { customRender: "id" }
  },
  {
    title: "楼盘名称",
    dataIndex: "name",
    key: "name"
  },
  {
    title: "所需区域",
    dataIndex: "area",
    key: "area"
  },
  {
    title: "价格",
    key: "price",
    dataIndex: "price",
    scopedSlots: { customRender: "price" }
  },
  {
    title: "更新时间",
    key: "time",
    dataIndex: "time",
    scopedSlots: { customRender: "time" }
  },
  {
    title: "排序",
    key: "sort",
    dataIndex: "sort",
    scopedSlots: { customRender: "sort" }
  },
  {
    title: "状态",
    key: "tags",
    dataIndex: "tags",
    scopedSlots: { customRender: "tags" }
  },
  {
    title: "操作",
    key: "action",
    scopedSlots: { customRender: "action" }
  }
];

export default {
  data() {
    return {
      columns,
      value: "",
      search: "",

      //三级联动
      arr: [1, 3, 4],
      province: [],
      cityarr: [],
      regionarr: [],
      provinceValue: "",
      cityValue: "",
      RegionValue: "",
      //tab
      activeName: "first",
      //房源数据
      housingList: [],
      //
      //蒙层表单x2
      //1.添加表单
      ruleForm: {
        name: "",
        area: "",
        price: "",
        time: "",
        sort: ""
      },

      //2.编辑表单
      editForm: {
        name: "",
        area: "",
        price: "",
        time: "",
        sort: ""
      },

      //表单输入条件提示
      rules: {
        name: [{ required: true, message: "请输入楼盘名称", trigger: "blur" }],
        area: [{ required: true, message: "请输入所需区域", trigger: "blur" }],
        price: [{ required: true, message: "请输入价格", trigger: "blur" }],
        sort: [{ required: true, message: "请输入排序", trigger: "blur" }]
      },
      //时间选择
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            }
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            }
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            }
          }
        ]
      },

      //蒙层开关
      flag: false,
      addFlag: false, //添加蒙层
      updateFlag: false //修改蒙层
    };
  },
  created() {
    this.housinglist();
    //三级联动获取
    this.provincearr = province;
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },

    //数据
    housinglist() {
      housingList().then(res => {
        if (res.data.code === 0) {
          this.$router.push("/login");
          this.$toast(res.data.msg);
        } else {
          this.housingList = res.data.data;
        }
      });
    },

    handleChange(value) {
      console.log(value);
    },

    //三级联动
    selectProvimce(id) {
      this.cityarr = [];
      this.regionarr = [];
      this.cityValue = "";
      this.RegionValue = "";
      for (let item of this.provincearr) {
        if (id == item.id) {
          console.log(item);
          this.cityarr = item.children;
        }
      }
    },
    selectcity(id) {
      this.regionarr = [];
      this.RegionValue = "";
      for (let item of this.cityarr) {
        if (id == item.id) {
          this.regionarr = item.children;
        }
      }
    },


    three() {
      for (let item of this.regionarr) {
        if (this.RegionValue == item.id) {
          axios.post("/api/three", { value: item }).then(res => {
            this.housingList=res.data.data
          });
        }
      }
    },


    
    //搜索
    roomsearch(value) {
      axios({
        url: "/api/roomsearch",
        method: "post",
        data: {
          value: value
        }
      }).then(res => {
        this.housingList = res.data.data;
      });
    },
    //删除数据
    Del(id) {
      axios({
        url: "/api/tableDataDel",
        method: "post",
        data: {
          id: id
        }
      }).then(res => {
        //调用函数
        this.housinglist();
      });
    },

    //关闭蒙层
    resetForm() {
      this.flag = false;
      this.addFlag = false;
      this.updateFlag = false;
    },

    //添加数据
    add() {
      this.flag = true;
      (this.addFlag = true), (this.ruleForm = {});
    },
    append(ruleForm) {
      this.flag = false;
      (this.addFlag = false),
        axios({
          url: "/api/housingAdd",
          method: "post",
          data: {
            name: ruleForm.name,
            area: ruleForm.area,
            price: ruleForm.price,
            time: ruleForm.time,
            sort: ruleForm.sort
          }
        }).then(res => {
          //调用函数刷新列表
          this.housinglist();
        });
    },

    //修改数据
    update(item) {
      this.flag = true;
      this.updateFlag = true;
      this.editForm = { ...item };
    },
    edit(editForm) {
      this.flag = false;
      this.updateFlag = false;

      axios({
        url: "/api/housingEdit",
        method: "post",
        data: {
          name: editForm.name,
          area: editForm.area,
          price: editForm.price,
          time: editForm.time,
          sort: editForm.sort,
          id: editForm.id
        }
      }).then(res => {
        //调用函数
        this.housinglist();
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.housing {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
  position: relative;
  .block {
    display: flex;
    .container {
      overflow: hidden;
    }
    .box {
      width: 800px;
      height: 50px;
      line-height: 50px;
      background: red;
      color: #fff;
    }
  }

  .mask {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 999;
    .from {
      width: 550px;
      height: 500px;
      margin: 40px auto;
      background-color: white;
      border-radius: 13px;
      .el-input__inner {
        width: 90%;
      }
      .block {
        margin-left: 65px;
        margin-bottom: 20px;
      }
    }
  }
  .ant-table-wrapper {
    margin-top: -10px;
  }
}
</style>
